<!--
 ZoSelectTabs单项展示配置
 @Author: mosowe
 @Date:2023-02-01 14:04:59
-->

<template>
  <template v-if="!props.col">
    <view
      :class="{
        name: true,
        select: props.select,
        scrollx: props.scrollX
      }"
      :style="{
        '--select-tabs-color': props.selectColor || ' #333333'
      }">
      <text class="text">
        {{ props.value || props.title }}
      </text>
      <text
        :class="['icon', props.icon]"
        v-if="props?.icon && props.icon?.indexOf('/') === -1"></text>
      <image
        v-if="props?.icon && props.icon?.indexOf('/') > -1"
        :src="props.icon"
        class="icon icon-image"></image>
    </view>
  </template>
  <template v-else>
    <view
      :class="{
        name: true,
        'col-name': props.col,
        disabled: props.disabled
      }"
      :style="{
        '--select-tabs-color': props.selectColor || ' #333333',
        '--disabled-tabs-color': '#999999'
      }">
      <text class="text">
        <text>{{ props.title }}</text>
        <text
          style="color: #ff0000"
          v-if="props.required">
          *
        </text>
      </text>
      <view class="right">
        <!-- #ifndef MP -->
        <slot :name="props.slotName || 'default'">
          <text
            :class="{
              value: true,
              select: props.select
            }">
            {{ props.value || props.placeholder || '请选择' }}
          </text>
          <text
            :class="['icon', props.icon]"
            v-if="props?.icon && props.icon?.indexOf('/') === -1"></text>
          <image
            v-if="props?.icon && props.icon?.indexOf('/') > -1"
            :src="props.icon"
            class="icon icon-image"></image>
        </slot>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <slot name="{{props.slotName}}"></slot>
        <template v-if="!props.slotName">
          <text
            :class="{
              value: true,
              select: props.select
            }">
            {{ props.value || props.placeholder || '请选择' }}
          </text>
          <text
            :class="['icon', props.icon]"
            v-if="props?.icon && props.icon?.indexOf('/') === -1"></text>
          <image
            v-if="props?.icon && props.icon?.indexOf('/') > -1"
            :src="props.icon"
            class="icon icon-image"></image>
        </template>
        <!-- #endif -->
      </view>
    </view>
  </template>
</template>

<script setup lang="ts">
interface propsType {
  select: any;
  selectColor: string;
  title: string;
  value: any;
  icon?: string;
  scrollX: boolean;
  col?: boolean;
  slotName?: string;
  placeholder?: string;
  disabled?: boolean;
  required?: boolean;
}
const props = defineProps<propsType>();
</script>

<style lang="scss" scoped>
.name {
  font-size: 28rpx;
  color: #333333;
  line-height: 88rpx;
  height: 88rpx;
  text-align: center;
  &.select {
    color: var(--select-tabs-color);
  }
  .text {
    display: inline-block;
    vertical-align: middle;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(33vw - 30rpx);
    line-height: 34rpx;
  }
  .icon {
    width: 30rpx;
    height: 30rpx;
    font-size: 24rpx;
    vertical-align: middle;
    color: #000000;
  }
  &.col-name {
    text-align: left;
    display: flex;
    align-items: center;
    .text {
      flex: 1;
    }
    .right {
      flex: 1;
      text-align: right;
      .value {
        color: #999;
        &.select {
          color: var(--select-tabs-color);
        }
      }
    }
  }
  &.disabled {
    .right {
      .value {
        color: #999;
        &.select {
          color: #999;
        }
      }
      .icon {
        color: #999;
      }
    }
  }
}
</style>
